import React, { Component } from 'react';
import { Carousel, Modal, Flex, Icon ,WingBlank} from 'antd-mobile';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import NewGroup from './newGroup';
import { goods_carousel, evalute_madel } from './goodsCarousel.less';
import {IMAGE_DOMAIN} from "../../utils/common";
import {group} from "../find/findIndex.less";
import {connect} from "dva";

class GoodsCarousel extends Component {
    constructor(props){
        super(props)
        const {v,goodsDetailInfo} = this.props;
        this.state={
            visible:false,
            num:0,
            show:true,
            modal: false,
            D:"",
            ShowHour:"",
            M:"",
            S:"",
            // now:goodsDetailInfo.nowTime,
            now: (new Date()).getTime(),
        };
        this.timer=null;
    }

    componentDidMount() {
        // simulate img loading
        this.timer=setTimeout(() => {
            // console.log(1);
            this.setState({
                num:this.state.num+1
            });
        }, 3000);
    }
    CountTime=()=>{
        //获取当前时间
        const {smallGroupDetailList} = this.props;
        var now = this.state.now;
        console.log(this.state.now)
        //设置截止时间
        var end = smallGroupDetailList.endTime;
        var start = smallGroupDetailList.startTime;
        let seconds = start>now?parseInt((start - now) / 1000):parseInt((end - now) / 1000);
        console.log(end,now,end - now)
        // 总的小时数
        let h = Math.floor(seconds / 60 / 60);
        // 天数
        let d = parseInt(h / 24);
        // 显示的小时数
        let showHour = Math.floor(h - d * 24);
        let m = Math.floor((seconds - h * 60 * 60) / 60);
        let s = Math.floor((seconds - h * 60 * 60 - m * 60));
        if (seconds < 0) {
            m = '00';
            s = '00';
            d = '00';
            showHour = '00';
        }
        this.setState({
            D:d,
            ShowHour:showHour,
            M:m,
            S:s,
            now:now+1000
        })
    };
    showModal = (groupId) => {
        this.setState({
            modal: true,
        });
        this.props.dispatch({type:"goodsDetail/smallGroupDetailEFF",obj:{id:groupId}}).then(result=>{
            setInterval(this.CountTime, 1000, 1000);
            this.CountTime();
        })
    };
    onClose = () => {
        this.setState({
            modal: false,
        });
        // this.props.dispatch({type:"goodsDetail/clearState"})
    };
    componentWillUnmount(){
        // console.log(1);
        if(this.timer!=null){
            clearTimeout(this.timer);
        }
    }

    show  = (i) =>{
        this.setState({
            visible:true,
            num:i
        })
    }
    leixing=(src)=> {
        var index = src.indexOf(".");
        var a = src.substring(index);
        if (a == ".bmp" || a == ".png" || a == ".gif" || a == ".jpg" || a == ".jpeg") {
           return true
        } else if (a == ".mp4" || a == ".rmvb" || a == ".avi" || a == ".ts") {
            return false
        }
    }
    render() {
        const { callyList,goodsDetailInfo,newGroupList,smallGroupDetailList={} } = this.props;
        const { num, visible ,D,
            ShowHour,
            M,
            S, } = this.state;
        console.log(goodsDetailInfo)
        return (
            <div className={goods_carousel} style={{position:"relative"}}>
                {goodsDetailInfo.activityType  ==110&&newGroupList[0]? <NewGroup showModal={this.showModal} newGroupList={newGroupList} cl={1} SHow={this.props.SHow}></NewGroup>:""}
                <Modal
                    visible={this.state.modal}
                    transparent
                    className={group}
                    maskClosable={true}
                    onClose={this.onClose}
                    title={
                        <Flex justify="center">
                            <div style={{marginRight:".1rem"}}>
                                还差 <span style={{color:"#fff"}}>{smallGroupDetailList.surplusNum}人</span>
                            </div>
                            <div>
                                剩余
                                <span style={{color:"#fff"}}>{D<10?"0"+D:D}</span> 天
                                <span style={{color:"#fff"}}>{ShowHour<10?"0"+ShowHour:ShowHour}</span>:
                                <span style={{color:"#fff"}}>{M<10?"0"+M:M}</span>:
                                <span style={{color:"#fff"}}>{S<10?"0"+S:S}</span>
                            </div>
                        </Flex>
                    }
                >
                    <Flex justify="around" style={{width:"100%",margin:".7rem 0"}}>
                        {smallGroupDetailList.list&&smallGroupDetailList.list.map((v,i)=>{
                            return <div key={i} style={{textAlign:"center"}}>
                                <NoLazyImg src={v.memberAvatar } style={{width:".7rem",height:".7rem",borderRadius:"100%"}}></NoLazyImg>
                                <div>{v.memberName }</div>
                            </div>
                        })}
                        {[...Array(smallGroupDetailList.surplusNum)].map((a,b)=>{
                            return <div key={b} style={{textAlign:"center"}}>
                                <Flex justify="center" style={{width:".7rem",height:".7rem",borderRadius:"100%",marginTop:".1rem",background:"#DDDDDD",color:"#666"}}>?</Flex>
                                <div style={{opacity:"0"}}>111</div>
                            </div>
                        })}
                    </Flex>
                    <div style={{width:"50%",margin:"auto",background:"#FE0A3E",color:"#fff",borderRadius:".3rem",padding:".1rem .15rem"}} onClick={()=>{
                        this.props.open(true,2,3)
                    }}>立即参与</div>
                </Modal>
                {/*{goodsDetailInfo.activityType  ==110? <Flex  style={{width:"60%",zIndex:"11",background:"#333",opacity:".5"*/}
                    {/*,padding:".1rem .15rem",borderRadius:".25rem",color:"#fff",position:"absolute",top:".3rem",left:".3rem"}}>*/}
                    {/*<div style={{width:"100%"}}>新团：</div>*/}
                    {/*<WingBlank style={{width:"100%"}}>*/}
                        {/*<Carousel className="my-carousel"*/}
                                  {/*vertical*/}
                                  {/*dots={false}*/}
                                  {/*dragging={false}*/}
                                  {/*swiping={false}*/}
                                  {/*autoplay={true}*/}
                                  {/*infinite*/}
                                  {/*autoplayInterval={2000}*/}
                        {/*>*/}
                            {/*{newGroupList.map((v,i)=>{*/}
                                {/*return <div key={i} className="v-item" style={{height:".7rem"}}>{v.description}</div>*/}
                            {/*})}*/}
                        {/*</Carousel>*/}
                    {/*</WingBlank>*/}
                    {/*<Flex style={{width:"100%"}} justify="center">*/}
                        {/*<div style={{background:"#FE0A3E",color:"#fff",borderRadius:".3rem",padding:".1rem .15rem",marginLeft:".2rem"}}>立即参与</div>*/}
                    {/*</Flex>*/}

                {/*</Flex>:""}*/}

                <Carousel
                    selectedIndex={ num }
                    autoplay={false}
                    infinite
                    dots
                >
                    {
                        callyList.map((item, index) => (
                            <div
                                key={index}
                                onClick={()=>{
                                    if(this.leixing(item)) this.show(index)
                                }}
                            >
                                {this.leixing(item)? <NoLazyImg
                                    onLoad={
                                        ()=>{
                                            window.dispatchEvent(new Event('resize'));
                                        }
                                    }
                                    src={item}
                                />:<video src={IMAGE_DOMAIN+item} controls width="100%" height="100%"/>}

                            </div>

                        ))
                    }
                </Carousel>

                {/*<Modal*/}
                    {/*visible={visible}*/}
                    {/*transparent*/}
                    {/*maskClosable*/}
                    {/*onClose={()=>{*/}
                        {/*this.setState({*/}
                            {/*visible:false*/}
                        {/*})*/}
                    {/*}}*/}
                    {/*style={{ width: '100%' }}*/}
                {/*>*/}
                    {/*<NoLazyImg*/}
                      {/*className="imgDe"*/}
                      {/*onClick={() => {*/}
                          {/*this.setState({*/}
                              {/*visible:false*/}
                          {/*})*/}
                      {/*}}*/}
                      {/*src={imgurl}*/}
                      {/*style={{ width: '100%' }}*/}
                    {/*/>*/}
                {/*</Modal>*/}

                <Modal
                    visible={visible}
                    transparent
                    maskClosable={false}
                    className={evalute_madel}
                    //onClose={this.onClose('modal1')}
                    //title="Title"
                    // footer={[{ text: 'Ok', onPress: () => { console.log('ok'); this.onClose('modal1')(); } }]}
                    // wrapProps={{ onTouchStart: this.onWrapTouchStart }}
                >
                    <div style={{ height:"100%" }}>
                        <Flex className="title" justify="between">
                            <div
                                onClick={()=>{ this.setState({
                                    visible:false
                                }) }}
                            >
                                <Icon style={{ width:'0.44rem', height:'0.44rem', verticalAlign:"middle" }}  type="left" />
                            </div>
                            <div style={{fontSize:".4rem"}}>
                                {num+1}/{callyList.length}
                            </div>
                            <div></div>
                        </Flex>

                        <Flex className="ev_carousel">
                        <Carousel
                            //key={this.state.num}
                            //  className={index_banner}
                            selectedIndex={num}
                            //autoplay={data.length != 1}
                            autoplay={false}
                            afterChange={(n)=>{
                                this.setState({
                                    num:n
                                })
                            }}
                            infinite
                            dots={true}
                            // resetAutoplay={true}
                        >
                            {
                                callyList.map((item, index) => (
                                    <div key={index}>
                                        <NoLazyImg
                                            onClick={()=>{ this.setState({
                                                visible:false
                                            }) }}
                                            onLoad={
                                                ()=>{
                                                    window.dispatchEvent(new Event('resize'));
                                                }
                                            }
                                            style={{ width:"100%", height:"auto" }}
                                            src={item}
                                        />
                                    </div>
                                ))
                            }
                        </Carousel>
                        </Flex>
                    </div>

                </Modal>
            </div>
        );
    }
}

export default connect(({ goodsDetail }) => ({ goodsDetail }))(GoodsCarousel);
